<template>
  <el-card class="box-card">
    <div class="search-card">
    <div class="search-row">
      <div class="search-row-title" :style="{background: '#14C3CC'}">
        <span>单机</span>
      </div>
      <div class="search-row-values">
        <span v-for="item in data.headAloneGames" :key="item.id" @click="gotoDetail(item,router,axios)">
          {{ item.name }}
        </span>
      </div>
    </div>
    <div class="search-row">
      <div class="search-row-title" :style="{background: '#F9B002'}">
        <span>网游</span>
      </div>
      <div class="search-row-values">
        <span v-for="item in data.headNetworkGames" :key="item.id" @click="gotoDetail(item,router,axios)">
          {{ item.name }}
        </span>
      </div>
    </div>
    <div class="search-row">
      <div class="search-row-title" :style="{background: '#47B752'}">
        <span>手游</span>
      </div>
      <div class="search-row-values">
        <span v-for="item in data.headSyGames" :key="item.id" @click="gotoDetail(item,router,axios)">
          {{ item.name }}
        </span>
      </div>
    </div>
    <!-- <div class="search-row">
      <div class="search-row-title" :style="{background: '#F54446'}">
        <span>页游</span>
      </div>
      <div class="search-row-values">
        <span v-for="item in data.headPageGames" :key="item.id" @click="gotoDetail(item,router,axios)">
          {{ item.name }}
        </span>
      </div>
    </div> -->
  </div>
  </el-card>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { onBeforeMount, ref } from "vue";
const router = ref(useRouter());
defineProps({
  data: {
    type: Array,
    default: ()=>[],
  },
});

const rows = [
  {
    name: "单机",
    background: '#14C3CC',
    children: [
      {
        name: "全部",
        value: "",
      },
      {
        name: "视频播放",
        value: "",
      },
      {
        name: "聊天软件",
        value: "",
      },
      {
        name: "办公软件",
        value: "",
      },
      {
        name: "浏览器",
        value: "",
      },
      {
        name: "输入法",
        value: "",
      },
      {
        name: "图像处理",
        value: "",
      },
      {
        name: "下载工具",
        value: "",
      },
    ],
  },
  {
    name: "网游",
    background: "#F9B002",
    children: [
      {
        name: "全部",
        value: "",
      },
      {
        name: "视频播放",
        value: "",
      },
      {
        name: "聊天软件",
        value: "",
      },
      {
        name: "办公软件",
        value: "",
      },
      {
        name: "浏览器",
        value: "",
      },
      {
        name: "输入法",
        value: "",
      },
      {
        name: "图像处理",
        value: "",
      },
      {
        name: "下载工具",
        value: "",
      },
    ],
  },
  {
    name: "手游",
    background: "#47B752",
    children: [
      {
        name: "全部",
        value: "",
      },
      {
        name: "绿色软件",
        value: "",
      },
      {
        name: "免费软件",
        value: "",
      },
      {
        name: "国产软件",
        value: "",
      },
      {
        name: "浏览器",
        value: "",
      },
      {
        name: "汉化补丁",
        value: "",
      },
    ],
  },
];
</script>

<style lang="less" scoped>
.search-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 0;

  .search-row {
    display: flex;
    margin: 0px 0 10px 0;
    align-items: center;

    &:last-child {
      margin: 0px 0 0px 0;
    }

    .search-row-title {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 14px;
      width: 51px;
      height: 24px;
      margin: 0 20px 0 0px;
      // span::after {
      //   content: ":";
      // }
    }
  }

  .search-row-values {
    display: flex;
    // align-items: center;
    flex-flow: row;
    flex-wrap: wrap;
    max-width: 1150px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1D2127;
    line-height: 2;

    span {
      margin-right: 20px;
      cursor: pointer;
    }

    span:hover {
      color: @link-color;
    }
  }
}
</style>